<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style>
html {  
scrollbar-base-color: #fff;  
scrollbar-base-color: #fff;  
scrollbar-3dlight-color: #fff;  
scrollbar-highlight-color: #fff;  
scrollbar-track-color: #fff;  
scrollbar-arrow-color: #fff;  
scrollbar-shadow-color: #fff;  
scrollbar-dark-shadow-color: #fff;  
} 	
	
</style>
        <!--<script type="text/javascript" src="../lib/jq/jquery-1.11.3.min.js" ></script>-->
        
        	
        <!-- 导入 BootStrap 的相关 -->	
        <!-- 导入css样式 -->
		<!--<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />-->
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<!--<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>-->
		
		
				
	</head>
	<body>
	
<fieldset>
	<legend><h1>隐藏右边下边得滚动条</h1></legend>
	<style>
		/* 全局去掉滚动条 */
		/*::-webkit-scrollbar {
            width: 0px;
        }*/
		#dv01{width:300px;height:300px;}
		#dv01{width:200px;height:200px;}
		#dv01{width:100px;height:100px;}
	</style>
	<button onclick="goCss();">去掉滚动条样式</button>
	<div id="dv01" style="overflow:scroll">
		vd01
		<div id="dv02" style="overflow:scroll">
			vd02
			<div id="dv03" style="overflow:scroll">
				vd03
			</div>
		</div>
	</div>
	<script>
		function goCss() {
			// 配置上面的额html得样式和::-webkit-scrollbar得样式
			$("body").css("overflow-x","hidden");
		}
	</script>
</fieldset>
	
<fieldset>
	<legend><h1>JS表格排序（排序部分未完成）</h1></legend>
	<button id="asc">升序</button><button id="desc">降序</button>
	<div>
		<table id="jsTB">
			<thead>
				<tr>
					<th>序号</th><th>姓名</th><th>年龄</th><th>数量</th>
				</tr>
			</thead>
			<tbody id="tbd">
				<tr>
					<td>1</td><td>bart</td><td>18</td><td><a href="javascript:;">10</a></td>
				</tr>
				<tr>
					<td>2</td><td>lisa</td><td>15</td><td>0</td>
				</tr>
				<tr>
					<td>3</td><td>maggie</td><td>3</td><td><a href='javascript:;'>1</a></td>
				</tr>
				<tr>
					<td>汇总</td><td>name3</td><td>90</td><td>23</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<script>
		
		$(function(){

			$("#asc").click(function(){
				alert("升序")
//				let arr = getTB();
				let arr = getTableContent();
				console.log("old arr :",arr);
//				let newArr = arr.sort(sortBy(1));
				let newArr = arr.sort(compareAsc);
				console.log("new arr :",newArr);
				fillTB(newArr);
			})
			$("#desc").click(function(){
				alert("降序")
//				let arr = getTB();
				let arr = getTableContent();
				console.log("old arr :",arr);
				// 为什么不执行此方法？？？？？？
//				let newArr = arr.sort(sortBy(-1));
				let newArr = arr.sort(compareDesc);
				console.log("new arr :",newArr);
				fillTB(newArr);
			})
		})
		
		function fillTB(arr){
			let trs = "";
			for(let k in arr){
				let emp = arr[k];
				let tr = '<tr><td>'+ (parseInt(k)+1) +'</td><td>'+ emp['name'] + 
							'</td><td>' + emp['age'] + '</td><td>' + 
							emp['num'] +'</td></tr>';
				trs += tr;
			}
			let last = $("#tbd").children("tr").eq($("#tbd").children().length-1).html();
			$("#tbd").empty();
			$("#tbd").append(trs+last);
		}
		
		function getTB(){
			var arr = [];
			$("#tbd").children("tr").each(function(index){
				let tr = $(this).children();
//				console.log("tr 的 td 子节点数量: ",tr.length)
				let id = $(tr).eq(0).html();
				let name = $(tr).eq(1).html();
				let age = $(tr).eq(2).html();
				let num = $(tr).eq(3).html();
				let emp = {id:id,name:name,age:age,num:num};
//				console.log("emp --->>> ",emp);
				arr.push(emp);
			});
//			console.log(arr);
			return arr;
		}
		
		
		/*function sortBy(k){
			let compareAsc = function(x,y){
				if(typeof x['num'] != "undefined" && typeof y['num'] != "undefined"
					&& !isNaN(x['num']) && !isNaN(y['num']) ){
					if(x['num'] > y['num']){
						return -1*k
					}else if(x['num'] < y['num']){
						return 1*k
					}else{
						return 0
					}
				}else{
					if(x['id'] > y['id']){
						return -1*k
					}else if(x['id'] < y['id']){
						return 1*k
					}else{
						return 0
					}
				}
			}
			
			return compareAsc;
			
		}*/
		
		// 使用原生JS获得Tbale中的数据
		function getTableContent() {
//			console.log("--------------------------");
			let arr = [];
			let tab = document.getElementById("jsTB");
			let rows = tab.rows;
			for(let i=1; i < rows.length-1 ; i++){ // 业务需要去掉表头和最后一行
				let row = rows[i];
				let cells = row.cells;
//				console.log(cells[0])
				let id = cells[0].innerHTML;
				let age = cells[1].innerHTML;
				let name = cells[2].innerHTML;
				let num = cells[3].innerHTML;
				let emp = {id:id,name:name,age:age,num:num};
				arr.push(emp);
			}
//			console.log(arr)
//			console.log("--------------------------");
			return arr;
		}
		
		var compareAsc = function(x,y){
			// 拿到a标签中的内容
			let av1 = x['num'].match(/\d+/)[0];
			let av2 = y['num'].match(/\d+/)[0];
			console.log("av1,av2 : ",av1,av2)
			if(typeof av1 != "undefined" && typeof av2 != "undefined"
				&& !isNaN(av1) && !isNaN(av2) ){
				if(av1 === av2){
					return 0
				}else {
					return (av1>av2)?-1:1;
				}
			}else{
				if(x['id'] === y['id']){
					return 0;
				}else{
					return (x['id'] > y['id'])?-1:1;
				}
			}
		}
		
		var compareDesc = function(x,y){
			// 拿到a标签中的内容
			let av1 = x['num'].match(/\d+/)[0];
			let av2 = y['num'].match(/\d+/)[0];
			console.log("av1,av2 : ",av1,av2)
			if(typeof av1 != "undefined" && typeof av2 != "undefined"
				&& !isNaN(av1) && !isNaN(av2) ){
				if(av1 === av2){
					return 0
				}else {
					return (av1>av2)?1:-1;
				}
			}else{
				if(x['id'] === y['id']){
					return 0;
				}else{
					return (x['id'] > y['id'])?1:-1;
				}
			}
		}
		
		function getATag(tag){
			let re=/<a[^>]*href=['"]([^"]*)['"][^>]*>(.*?)<\/a>/g;
			re.exec(tag);
			return RegExp.$2;
		}
	</script>
</fieldset>

<fieldset>
<legend><h1>根据身份证计算年龄和性别</h1></legend>
<p id="idNumber">610524199303210033</p>	
<p id="showSex"></p>	
<p id="showAge"></p>	
</fieldset>	
<script>
$(document).ready(function(){
	var date=new Date;
	var year=date.getFullYear(); 
	var idStr = $("#idNumber").text();
	console.log(idStr);
	var birth = idStr.substr(6,4);
	console.log(birth);
	var age = year - parseInt(birth);
	console.log(age);
	
	var genderStr = idStr.substr(16,1)
	var genderInt = parseInt(genderStr);
	var sexStr = "男";
	if(genderInt % 2 ==0){
		sexStr = "女"
	}
	console.log(sexStr);
	$("#showSex").text(sexStr);
	$("#showAge").text(age);
});
</script>

<fieldset>
<legend><h1>jquery遍历方法</h1></legend>
<button name="btn">btn01</button><input type="text" name="showVal" readonly="true"/><br />
<button name="btn">btn02</button><input type="text" name="showVal" readonly="true"/><br />
<button name="btn">btn03</button><input type="text" name="showVal" readonly="true"/><br />
</fieldset>
<script>
	$("[name='btn']").each(function(index){
		$(this).click(function(){
			var val = $(this).text();
			console.log(val);
			$("[name='showVal']").eq(index).val(val);
		})
	})
</script>


<fieldset>
<legend><h1>校验中文的正则</h1></legend>
<input type="text" id="name1" placeholder="please input ..."/>
<button onclick="verifyInput()">校验</button>
</fieldset>
<script>
//校验方法
function verifyInput(){
	var temp = $("#name1").val();
	if(isChinese(temp) ){
		alert("中文!!!");  
	}else{
		alert("不是中文!!!"); 
	}
}

//校验中文
function isChinese(temp) {  
	var re = /[^\u4e00-\u9fa5]/;  
	return re.test(temp)?false:true;
}  

</script>

<fieldset>
<legend><h1>去掉空格的正则</h1></legend>
<pre>
	str.replace(/\s+/g, "");
</pre>
<input type="text" id="in1" placeholder="please input ..."/>
<button onclick="trimSpace()">去空格</button>
<input type="text" id="out1" placeholder="please input ..." readonly="true"/>
<script>
	function trimSpace(){
		let v = $("#in1").val().replace(/\s+/g, "");
		$("#out1").val(v);
	}
</script>
</fieldset>

<fieldset>
<legend><h1>弹出窗口</h1></legend>
<!--<table border="1px" cellpadding="1px" cellspacing="1px">
    <tbody><tr><td>channelmode=yes|no|1|0</td><td>是否使用剧院模式显示窗口。默认为 no。</td></tr>
    <tr><td>directories=yes|no|1|0</td><td>是否添加目录按钮。默认为 yes。</td></tr>
    <tr><td>fullscreen=yes|no|1|0</td><td>是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。</td></tr>
    <tr><td>height=pixels</td><td>窗口文档显示区的高度。以像素计。</td></tr>
    <tr><td>left=pixels</td><td>窗口的 x 坐标。以像素计。</td></tr>
    <tr><td>location=yes|no|1|0</td><td>是否显示地址字段。默认是 yes。</td></tr>
    <tr><td>menubar=yes|no|1|0</td><td>是否显示菜单栏。默认是 yes。</td></tr>
    <tr><td>resizable=yes|no|1|0</td><td>窗口是否可调节尺寸。默认是 yes。</td></tr>
    <tr><td>scrollbars=yes|no|1|0</td><td>是否显示滚动条。默认是 yes。</td></tr>
    <tr><td>status=yes|no|1|0</td><td>是否添加状态栏。默认是 yes。</td></tr>
    <tr><td>titlebar=yes|no|1|0</td><td>是否显示标题栏。默认是 yes。</td></tr>
    <tr><td>toolbar=yes|no|1|0</td><td>是否显示浏览器的工具栏。默认是 yes。</td></tr>
    <tr><td>top=pixels</td><td>窗口的 y 坐标。</td></tr>
    <tr><td>width=pixels</td><td>窗口的文档显示区的宽度。以像素计。</td></tr></tbody>
</table>-->
<table  border="1px" cellpadding="1px" cellspacing="1px" >
  <tbody><tr><th align="left" width="20%">参数</th><th align="left" width="80%">说明</th></tr>  
  <tr><td>URL</td><td>可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口</td></tr>
  <tr><td>name</td><td>可选。指定target属性或窗口的名称。支持以下值：
  	<ul class="dd1">
		<li>_blank - URL加载到一个新的窗口。这是默认</li>
		<li>_parent - URL加载到父框架</li>
		<li>_self - URL替换当前页面</li>
		<li>_top - URL替换任何可加载的框架集</li>
		<li><i>name</i> - 窗口名称</li>
	</ul>
	</td>
  </tr>
  <tr>
    <td>specs</td><td>可选。一个逗号分隔的项目列表。支持以下值：<br><br>
<table border="1px" cellpadding="1px" cellspacing="1px">
	<tbody><tr><td>channelmode=yes|no|1|0</td><td>是否要在影院模式显示 window。默认是没有的。仅限IE浏览器</td></tr>
    <tr><td>directories=yes|no|1|0</td><td>是否添加目录按钮。默认是肯定的。仅限IE浏览器</td></tr>
    <tr><td>fullscreen=yes|no|1|0</td><td>浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器</td></tr>
    <tr><td>height=pixels</td><td>窗口的高度。最小.值为100</td></tr>
    <tr><td>left=pixels</td><td>该窗口的左侧位置</td></tr>
    <tr><td>location=yes|no|1|0</td><td>是否显示地址字段.默认值是yes</td></tr>
    <tr><td>menubar=yes|no|1|0</td><td>是否显示菜单栏.默认值是yes</td></tr>
    <tr><td>resizable=yes|no|1|0</td><td>是否可调整窗口大小.默认值是yes</td></tr>
    <tr><td>scrollbars=yes|no|1|0</td><td>是否显示滚动条.默认值是yes</td></tr>
    <tr><td>status=yes|no|1|0</td><td>是否要添加一个状态栏.默认值是yes</td></tr>
    <tr><td>titlebar=yes|no|1|0</td><td>是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes</td></tr>
    <tr><td>toolbar=yes|no|1|0</td><td>是否显示浏览器工具栏.默认值是yes</td></tr>
    <tr><td>top=pixels</td><td>窗口顶部的位置.仅限IE浏览器</td></tr>
    <tr><td>width=pixels</td><td>窗口的宽度.最小.值为100</td></tr>
    </tbody></table>
    <br>
    </td>
  </tr>
    <tr>
    <td>replace</td><td>Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
	<ul><li>true - URL 替换浏览历史中的当前条目。</li><li>false - URL 在浏览历史中创建新的条目。</li></ul>
	</td>
  </tr>
  </tbody></table>
<button onclick="jumpWindow();">弹出窗口</button>
</fieldset>

<script>
function jumpWindow(){
	openWindow();
}

//打开新窗口的方法
function openWindow(){
	//第一个参数:地址
	//第二个参数:新窗口打开
	//第三个参数:显示工具栏,是否显示标题栏。默认是 yes,是否显示地址字段。默认是 yes
	// 是否添加目录按钮。默认为 yes,是否添加状态栏。默认是 yes,是否显示菜单栏。默认是 yes
	// 是否显示滚动条。默认是 yes,窗口是否可调节尺寸。默认是 yes，是否使用剧院模式显示窗口。默认为 no
	window.open("http://www.w3school.com.cn","_blank",//
	"toolbar=yes,titlebar=yes,location=yes,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,channelmode = yes,width=400,height=400");
}

</script>

<fieldset>
<legend><h1>模仿百度下拉查询</h1></legend>
<!--<form id="form-country_v1" name="form-country_v1">-->
    <div class="typeahead__container" style="width:20%;">
        <div class="typeahead__field" >
            <span class="typeahead__query">
                <input id="typeaheadInput" class="js-typeahead" name="q" type="search" placeholder="输入关键词..." autocomplete="off" autofocus="false" >
            </span>
           <!-- <span class="typeahead__button">
                <button type="submit">
                    <i class="typeahead__search-icon"></i>
                </button>
            </span>-->
        </div>
    </div>
<!--</form> -->

</fieldset>

<!--
	作者：offline
	时间：2017-12-15
	描述：引入 bootstrap-typeahead.js 
-->
<link rel="stylesheet" href="../../lib/typehead/jquery.typeahead.css">
<script type="text/javascript" src="../../lib/typehead/jquery.typeahead.js"></script>

<script>
//typeof $.typeahead === 'function' && $.typeahead({
	$("#typeaheadInput").typeahead({
    /*input: ".js-typeahead",*/
    /*input: ".js-typeahead",*/
    /*input : "#typeaheadInput",*/
    minLength: 1,
    maxItem: 15,
    order: "asc",
    hint: true,
    maxItemPerGroup: 5,
    backdrop: {
        "background-color": "#fff"
    },
   /* href: "/beers/{{group}}/{{display}}/",
    dropdownFilter: "all beers",*/	
    emptyTemplate: '未查询到关键词 "<font color="red">{{query}}</font>"',//未找到关键词的提示框
    source: {
    	data: [
            "中间","中国","中南西北","中华大地","在中间"
        ]
    },
    callback: {
        onReady: function (node) {//typehead组件加载完成的时候触发
           /* this.container.find('.' + this.options.selector.dropdownItem + '.group-ale a').trigger('click');*/
        },
        onDropdownFilter: function (node, query, filter, result) {//提示下拉框出来的时候
            console.log(query)
            console.log(filter)
            console.log(result)
        }
    },
    debug: true
});
</script>



<fieldset>
<legend><h1>js获取当地时间并且拼接时间格式的三种方式</h1></legend>

</fieldset>
<script>
//方式 1 
var date = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');  
console.log(date);//2017-01-22 11:08:46  

// 方式 2
var date2 = new Date();  
var strDate = date.toLocaleString().replace(/[年月]/g,'-').replace(/[日上下午]/g,'');  
console.log(strDate);//  2017/1/22 11:11:56  

// 方式3
function getNowFormatDate() {  
    var date = new Date();  
    var seperator1 = "-";  
    var seperator2 = ":";  
    var month = date.getMonth() + 1;  
     
    var strDate = date.getDate();  
    if (month >= 1 && month <= 9) {  
        month = "0" + month;  
    }  
    if (strDate >= 0 && strDate <= 9) {  
        strDate = "0" + strDate;  
    }  
      
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate  
            + " " + date.getHours() + seperator2 + date.getMinutes()  
            + seperator2 + date.getSeconds();  
    return currentdate;  
}   
var data3 = getNowFormatDate();  
console.log(data3);  //2017-01-22 11:14:16  
</script>


<h1>获得select的值</h1>
<pre>
	使用select的时候如果option没有显示指明value那个默认的val去得到的就是option标签包裹的值,否则就是value的值<br/>
	使用select的时候option形如&lt;select id="gender" &gt;&lt;option value="man" &gt;男&lt;/option&gt;&lt;/select&gt;<br />
	使用$("#gender").val();获得的是"man"而
	$("#gender option:selected").text();获得才是"男"
</pre>
<select id="gender" name="gender" onchange="selectGender(this.value);" >
	<option value="man" >男</option><option value="women">女</option>
</select>
<script>
//	$("#gender").change(function(){
////		var gender = $(this).val();
//		var gender = $("#gender option:selected").text();
//		alert(gender);
//	});
	
	function selectGender(g){
		alert(g);
		var selectHtml = '<select id="so"><option value="0">省内</option><option value="1">省外</option></select>';
		switch(g){
		case "man" :
			$("#gender").after(selectHtml);
			break;
		case "women" : 
			$("#gender").nextAll().remove();
		}
		
	}
	
</script>
<div id="add">
              <dl class="gsjs_input" style="float:left;">
                <dt class="gsjs_title">就学层次： </dt>
                <input type="hidden" id="SCHOOL_LEVEL" name="SCHOOL_LEVEL"  value="" />
                <dd>
                	<select id="pa" onchange="selectLevel(this.value)" >
                		<option value="1">学前</option><option value="2">小学</option><option value="3">初中</option>
                		<option value="4">高中</option><option value="6">中职</option><option value="8">大专</option>
                		<option value="10">本科</option>
                	</select>
                 	
                </dd>
              </dl>
              </div>
<script type="text/javascript">
  	function selectLevel(pa){
  		var level = "";
  		var soHtml = '<select id="so"><option value="0">省内</option><option value="1">省外</option></select>';
  		var soExist= true;
  		switch(pa){
  		case "1":$("#so").remove();level = "1";break;
  		case "2":$("#so").remove();level = "2";break;
  		case "3":$("#so").remove();level = "3";break;
  		case "4":$("#so").remove();$("#pa").after(soHtml);break;
  		case "6":$("#so").remove();$("#pa").after(soHtml);break;
  		case "8":$("#so").remove();$("#pa").after(soHtml);break;
  		case "10":$("#so").remove();$("#pa").after(soHtml);break;
  		}
  	}
</script>
  <button onclick="sub();">提交</button>
<script>
  	function sub(){
  		var l = 0;
  		var pa = $("#pa").val();
  		var so = $("#so").val();
//            		alert(pa+">>"+so);
  		if(so === undefined){
  			l = parseInt(pa);
//            			alert(l);	
  		}else {
  			l = parseInt(pa) + parseInt(so);
  		}
  		alert(l);
  	}
</script>

<!-- 测试两个相同的ID  -->
<span id="sp1">sp1</span><span id="sp1">sp2</span>
<button id="btsp">123</button>
<script>
	$("#btsp").click(function(){
		var sp1 = $("#sp1").text();
		alert(sp1);
	})
</script>

<br /><br /><br />

<h1>动态增删表格</h1>
<script>
 ////////添加一行、删除一行封装方法///////
  /**
   * 为table指定行添加一行
   *
   * tab 表id
   * row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
   * trHtml 添加行的html代码
   *
   */
    function addTr(tab, row, trHtml){
	    //获取table最后一行 $("#tab tr:last")
	    //获取table第一行 $("#tab tr").eq(0)
	    //获取table倒数第二行 $("#tab tr").eq(-2)
	    var $tr=$("#"+tab+" tr").eq(row);
	    if($tr.size()==0){
	    alert("指定的table id或行数不存在！");
	    return;
	    }
	    $tr.after(trHtml);
    }
    
	function delTr(ckb){
	     //获取选中的复选框，然后循环遍历删除
	    var ckbs=$("input[name="+ckb+"]:checked");
	    if(ckbs.size()==0){
	        alert("要删除指定行，需选中要删除的行！");
	        return;
	    }
	    ckbs.each(function(){
	    $(this).parent().parent().remove();
	   });
	}
   
  /**
   * 全选
   * 
   * allCkb 全选复选框的id
   * items 复选框的name
   */
  function allCheck(allCkb, items){
   $("#"+allCkb).click(function(){
      $('[name='+items+']:checkbox').attr("checked", this.checked );
   });
  }
   
  ////////添加一行、删除一行测试方法///////
  $(function(){
   //全选
   allCheck("allCkb", "ckb");
  });
   
  function addTr2(tab, row){
    var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/></td><td width='30%'>地理</td><td width='30%'>60</td></tr>";
    addTr(tab, row, trHtml);
  }
   
  function delTr2(){
     delTr('ckb');
  }
</script>

 
<table border="1px #ooo" id="tab" cellpadding="0"
   cellspacing="0" width="30%">
   <tr align="center">
       <td width="30%"><input id="allCkb" type="checkbox"/></td>
    <td width="30%">科目</td>
    <td width="30%">成绩</td>
   </tr>
   <tr align="center">
    <td width="30%"></td>
    <td width="30%">语文</td>
    <td width="30%">80</td> 
   </tr>
</table>
<input type="button" onclick="addTr2('tab', -1)" value="添加">
<input type="button" onclick="delTr2()" value="删除">
 

<!-- 获得checkbox复选框 -->
<fieldset>
	<legend><h1>获得checkbox复选框</h1></legend>
	<div>
		角色1<input type="checkbox" name="roles" id="role_1" value="0"/><br />
		角色2<input type="checkbox" name="roles" id="role_1" value="1"/><br />
		角色3<input type="checkbox" name="roles" id="role_1" value="2"/><br />
		角色4<input type="checkbox" name="roles" id="role_1" value="3"/><br />
	</div>
	<button onclick="getBox();">button</button>
</fieldset>
<script>
	function getBox(){
		$(":checkbox[name='roles']:checked").each(function(index){
			alert("value: "+$(this).val()+" index: "+index);
		});
	}
</script>

<fieldset>
	<legend><h1>切割url字符串并使用encodeURIComponent()加密</h1></legend>
	<button onclick="showEncode();">button</button>
</fieldset>
<script>
	var urlStr = "https://idtest.yyuap.com/cas/thirdpartlogin?token=3B69F26D57082ADFF9A51D71C2CF2F0616560852F78853BCD2DBDD68D6C14D3C&clientId=LkODHO3kqzV0eF1athoSj7x3lzRXw595&ts=1516845939024&service=https://yesfp.yonyoucloud.com&sign=ID5Z7vaU52MVRY78kWAfLhZVa2o=";
	
	function showEncode(){
		console.log(getEncode(urlStr));
	}
	
	function getEncode(urlStr){
		var prefix = urlStr.substring(0,urlStr.indexOf("?")+1);
//		console.log(prefix);
		var tindex = urlStr.indexOf("token=");
		var cindex = urlStr.indexOf("clientId=");
		var tsIndex = urlStr.indexOf("ts=");
		var sindex = urlStr.indexOf("service=");
		var sindex2 = urlStr.indexOf("sign=");
//		console.log(tindex + "," + cindex + "," + tsIndex +","+ sindex+ "," + sindex2);
		var tokenStr = urlStr.substring(tindex+6,cindex-1);
//		console.log(tokenStr);
		var clientIdStr = urlStr.substring(cindex+9,tsIndex-1);
//		console.log(clientIdStr);
		var tsStr = urlStr.substring(tsIndex+3,sindex-1);
//		console.log(tsStr);
		var serviceStr = urlStr.substring(sindex+8,sindex2-1);
//		console.log(serviceStr);
		var signStr = urlStr.substring(sindex2+5,urlStr.length);
//		console.log(signStr);
		var fullUrl = prefix+"token="+encodeURIComponent(tokenStr)+"&clientId="+encodeURIComponent(clientIdStr)+"&ts="+encodeURIComponent(tsStr)+"&service="+encodeURIComponent(serviceStr)+"&sign="+encodeURIComponent(signStr);
//		console.log(fullUrl);
		return fullUrl;
	}
</script>

<fieldset>
	<legend><h1>jsp的函数使用</h1></legend>
	<pre>
		<strong>引入标签</strong>
		<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
		<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
		<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
		
		&lt;c:set var="string1" value="${item.ID_CARD}"/&gt;
		&lt;c:set var="string2" value="${fn:substring(string1, 0, 14)}" /&gt;
		${string2}****
		
	</pre>
</fieldset>


<fieldset>
	<legend><h1>遍历table中每个tr中指定td</h1></legend>
	<table id="tb01">
		<tr><th>年龄</th><th>性别</th><th>手机号</th></tr>
		<tr><td>15</td><td>男</td><td class="phone" >13488121965</td></tr>
		<tr><td>18</td><td>女</td><td class="phone" >13999120965</td></tr>
		<tr><td>21</td><td>男</td><td class="phone" >18988123365</td></tr>
	</table>
	<button onclick="getPhone();">得到所有的手机号</button>
</fieldset>
<script>
/**
 * 选择器 #tb01 tr 表示 后代tr中所有的 .phone 的对象
 * 要么使用 #tb01 tr td 或者 #tb01 .trClass .tdClass
 * 
 */
	function getPhone(){
		$("#tb01 tr .phone").each(function(index){
			alert("index:"+index+",phone:"+$(this).text().trim());
//			alert(index);
		});
	}
</script>

<fieldset>
	<legend><h1>遍历下拉框</h1></legend>
	<select id="sel" >
		<option value="0">苹果</option>
		<option value="1">橘子</option>
		<option value="3">香蕉</option>
	</select>
	<button onclick="getSel();">遍历下拉框</button>
	<select id="sel2" >
		<option value="0">苹果</option>
		<option value="1">橘子</option>
		<option value="3">香蕉</option>
	</select>
	
</fieldset>
<script>
	function getSel(){
		$("#sel option").each(function(index){
			var value = $(this).val()
			var text = $(this).text();
			alert("index:"+index+",value:"+value+",text:"+text);
		});
//		console.log($("#sel option"));
	}
	$("#sel2").change(function(){
		var sel2Text = $("#sel2 option:selected").text();
		$("#sel option").each(function(index){
//			var value = $(this).val()
			var text2 = $(this).text();
			if(sel2Text == text2){
				console.log("sel2Text:"+sel2Text+",text2:"+text2);
				$(this).attr("selected","selected");
			}else{
				$(this).removeAttr("selected");
			}
		});
	});
</script>


<fieldset>
<legend><h1>获得上传文件信息</h1></legend>
<input type="file" id="file" name="file" />
<button id="fbtn">得到文件信息</button>
</fieldset>
<script>
	$("#fbtn").click(function(){
		var files = $("#file");
		console.log("files:"+files);
		console.log("files长度:"+files.length);
		console.log("files[0]:"+files[0]);
		console.log("files[0].files:"+files[0].files);
		console.log("files[0].files.length:"+files[0].files.length);
		console.log("files[0].files.[0]:"+files[0].files[0]);//这个才是真正的文件对象
	});
</script>

<fieldset>
<legend><h1>获得父窗口的元素</h1></legend>
<pre>
$("#父窗口元素ID",window.parent.document);

对应javascript版本为

window.parent.document.getElementById("父窗口元素ID");

取父窗口的元素方法：

$(selector, window.parent.document);

取父窗口的父窗口的元素就可以用：

$(selector, window.parent.parent.document);

类似的，取其它窗口的方法大同小异
 获取iframe父窗体元素：

$(selector, window.parent.document);

获取通过windows.open()打开的父窗体：

$(selector, window.opener.document);

获取通过 showModelDialog()打开的父窗体：

$(selector, window.dialogArguments.document);

用于刷新父窗口整个页面：

window.parent.location.reload();

window插件关闭窗口,类似于window.close()：

parent.subWindow_add.Close();
</pre>
</fieldset>


<fieldset>
<legend><h1>获得父窗口的元素</h1></legend>
<button id="addBtn" onclick="addTr();">添加</button>
<button id="subBtn" onclick="subTable();">提交</button>
<table border="1" id="tabInfo">
	<tr>
		<td>是否户主</td><td>姓名</td><td>身份证号</td><td>手机号码</td>
		<td>与户主关系</td><td>是否就业</td><td>就业信息</td><td>编辑</td>
		<td>删除</td>
	</tr>
	<tr class="member">
		<td class="is_main"><span>是</span><input type="hidden" id="id_01" name="ids" value="100" /></td>
		<td class="name">张三</td><td class="id_card">1590129382193847652</td>
		<td class="phone">13456789098</td><td class="relation">户主</td><td class="is_work">是</td>
		<td class="work_info">务工</td><td><a class="edit" href="javascript:void(0)" onclick="edit(this)" >编辑</a></td>
		<td><a class="del" href="javascript:void(0)" onclick="del(this)" >删除</a></td>
	</tr>
	<tr class="member">
		<td class="is_main"><span>否</span><input type="hidden" id="id_01" name="ids" value="101" /></td>
		<td class="name">张三</td><td class="id_card">1590129382193847652</td>
		<td class="phone">13456789098</td><td class="relation">户主</td><td class="is_work">是</td>
		<td class="work_info">务农</td><td><a class="edit" href="javascript:void(0)" onclick="edit(this)">编辑</a></td>
		<td><a class="del" href="javascript:void(0)" onclick="del(this)" >删除</a></td>
	</tr>
	<tr class="member">
		<td class="is_main"><span>否</span><input type="hidden" id="id_01" name="ids" value="102" /></td>
		<td class="name">张三</td><td class="id_card">1590129382193847652</td>
		<td class="phone">13456789098</td><td class="relation">户主</td><td class="is_work">是</td>
		<td class="work_info">公益性岗位</td><td><a class="edit" href="javascript:void(0)" onclick="edit(this)">编辑</a></td>
		<td><a class="del" href="javascript:void(0)" onclick="del(this)" >删除</a></td>
	</tr>
	
	
	
</table>

<script>
$(function(){
	
});

/** 提交全部数据 */
function subTable(){
	console.log(getFamily());
}

/** 拼接家庭成员信息 */
function getFamily(){
	//拼接一个户的信息
	var family = "";
	$(".member").each(function(index){
		var isMain = $(this).children(".is_main").children().eq(0).text();
		var id = $(this).children(".is_main").children().eq(1).text();
		if(id === '' || id === undefined){
			id = "NONE";
		}
		var name = $(this).children(".name").text();
		var idcard = $(this).children(".id_card").text();
		var family_status = $(this).children(".relation").text();
		var phone = $(this).children(".phone").text();
		var is_work = $(this).children(".is_work").text();
		var work_info = $(this).children(".work_info").text();
		family += isMain + "$" + name +"$"+ idcard +"$"+ family_status +"$"+ phone +"$"+ is_work+"$"+work_info+"$"+id+"#";
	});
	return family;
}

/** 添加一行 */
function addTr(){
	var trHtml = "<tr class='member'>"+
		"<td class='is_main'><select id='is_main_select'><option>是</option><option>否</option></select></td>"+
		"<td class='name'><input type='text' name='name' id='name' value='' /></td>"+
		"<td class='id_card'><input type='text' name='id_card' id='id_card' value='' /></td>"+
		"<td class='phone'><input type='text' name='phone' id='phone' value=''></td>"+
		"<td class='relation'><input type='text' name='relation' id='relation' value='' ></td>"+
		"<td class='is_work'><select id='is_work' class='is_work_select'><option>是</option><option>否</option></select></td>"+
		"<td class='work_info'><select name='work_info' class='work_info_select'><option value=''>--选择--</option>"+
					"<option>务农</option><option>务工</option><option>创业</option><option>公益性岗位</option></select></td>"+
		"<td><a class='edit' href='javascript:void(0)' onclick='saveOne(this)'>保存</a></td>"+
		"<td><a class='del' href='javascript:void(0)' onclick='cancelOne(this)'>取消</a></td></tr>";
	$("#tabInfo").append(trHtml);
}

/** 根据 id 进入编辑模式 */
function edit(obj){
	//转换按钮的方法和内容
	edit2save(obj);
	del2cancel(obj);
	
	//获得所在tr的索引
	var tr_obj = $(obj).parent().parent();
	var tr_index = tr_obj.index();
	console.log(">>>>>>>"+tr_obj.index());
	//将所有的标签进入编辑状态
	goEdit(tr_index);
	
}

/** 将编辑按钮修改为保存 */
function edit2save(obj){
	$(obj).attr("onclick","saveOne(this)");
	$(obj).text("保存");
}

/** 保存按钮修改为编辑 */
function save2edit(obj){
	$(obj).attr("onclick","edit(this)");
	$(obj).text("编辑");
}

/** 将删除按钮修改为取消 */
function del2cancel(obj){
	$(obj).parent().siblings().children(".del").text("取消");
	$(obj).parent().siblings().children(".del").attr("onclick","cancelOne(this)");
}

/** 将取消按钮修改为删除 */
function cancel2del(obj){
	$(obj).attr("onclick","del(this)");
	$(obj).text("删除");
}

/** 保存一条记录 */
function saveOne(obj){
	
	//获得所在tr的索引
	var tr_obj = $(obj).parent().parent();
	var tr_index = tr_obj.index();
	
	//将所有的编辑状态退出并得到所有的值
	if(exitEdit(tr_index)){
		//转换按钮的方法和内容
		save2edit(obj);
		var obj2 = $(obj).parent().siblings().children(".del");
		cancel2del(obj2);
	}
		
}

var oldTrHtml = "";
// 进入编辑状态
function goEdit(tr_index){
	oldTrHtml = "";
	var tr_obj = $("#tabInfo .member").eq(tr_index);
//	console.log(tr_obj);
//	console.log(tr_index);
	//处理第一个"是否户主"
	var is_main_val = $("#tabInfo .member").children(".is_main").eq(tr_index-1).children().eq(0).text();
//	alert(is_main_val);
	//拼接select下拉框
	var is_main_select = "<select id='is_main_select'><option selected='selected'>是</option><option>否</option></select>";
	if(is_main_val === '否'){
		is_main_select = "<select id='is_main_select'><option>是</option><option selected='selected'>否</option></select>";
	}
	//删除旧的标签
	$("#tabInfo .member").children(".is_main").eq(tr_index-1).children().eq(0).remove();
	//添加新的标签在被选择元素的内部的开头添加
	$("#tabInfo .member").children(".is_main").eq(tr_index-1).prepend(is_main_select);
	oldTrHtml+=is_main_val+",";
	
	//处理第二个姓名
	var name_select = $("#tabInfo .member .name").eq(tr_index-1);//得到name的td对象
	var name_val = $(name_select).text(); // 得到 name 的值
	var name_html = "<input type='text' name='name' id='name' value="+name_val+">"; // 拼接name的输入框
	$(name_select).empty(); // 删除旧的
	$(name_select).append(name_html); // 添加到 .name 的 td中
	oldTrHtml+=name_val+",";
	
	// 处理“身份证号码”
	var id_card_select = $("#tabInfo .member .id_card").eq(tr_index-1);
	var id_card_val = $(id_card_select).text();
	var id_card_html = "<input type='text' name='id_card' id='id_card' value="+id_card_val+">";
	$(id_card_select).empty();
	$(id_card_select).append(id_card_html);
	oldTrHtml+=id_card_val+",";
	
	//处理“手机号码”
	var phone_select = $("#tabInfo .member .phone").eq(tr_index-1);
	var phone_val = $(phone_select).text();
	var phone_html = "<input type='text' name='phone' id='phone' value="+phone_val+">";
	$(phone_select).empty();
	$(phone_select).append(phone_html);
	oldTrHtml+=phone_val+",";
	
	// 与户主关系
	var relation_select = $("#tabInfo .member .relation").eq(tr_index-1);
	var relation_val = $(relation_select).text();
	var relation_html = "<input type='text' name='relation' id='relation' value="+relation_val+">";
	$(relation_select).empty();
	$(relation_select).append(relation_html);
	oldTrHtml+=relation_val+",";
	
	// 是否就业
	var is_work_select = $("#tabInfo .member .is_work").eq(tr_index-1);
	var is_work_val = $(is_work_select).text();
	var is_work_html_begin = "<select id='is_work' class='is_work_select'>";
	var is_work_mid = "<option selected='selected'>是</option><option>否</option>";
	if(is_work_val === '否'){
		is_work_mid = "<option>是</option><option selected='selected'>否</option>";
	}
	var is_work_html_end = "</select>";
	$(is_work_select).empty();
	$(is_work_select).prepend(is_work_html_begin+is_work_mid+is_work_html_end);
	oldTrHtml+=is_work_val+",";
	
	// 就业信息
	var work_info_select = $("#tabInfo .member .work_info").eq(tr_index-1);
	var work_info_val = $(work_info_select).text();
	var work_info_html = "<select name='work_info' class='work_info_select'><option value=''>--选择--</option>"+
			"<option>务农</option><option>务工</option><option>创业</option><option>公益性岗位</option></select>";
	$(work_info_select).empty(); 
	$(work_info_select).prepend(work_info_html);
	$(work_info_select).children(".work_info_select").children().each(function(){
		if($(this).val() === work_info_val) {
			$(this).attr("selected","selected");
		}
	});
	oldTrHtml+=work_info_val;
}


// 保存退出编辑状态
function exitEdit(tr_index){
	var passTag = false;
	var tr_obj = $("#tabInfo .member").eq(tr_index); // 得到当前的 tr
	var is_main_val = $("#tabInfo .member").children(".is_main").eq(tr_index-1).children().eq(0).val();//得到当前的值
	var is_main_html = "<span>"+is_main_val+"</span>";
	
	// 处理“姓名”
	var name_select = $("#tabInfo .member .name").eq(tr_index-1);//得到name的td对象
	var name_val = $(name_select).children().eq(0).val(); // 得到 name 的值
	
	// 校验姓名
	if(name_val != '' && name_val != null && name_val != undefined){
		if(!/(^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$)/.test(name_val)){
			alert("请输入中文姓名!");
			return false;
		}else{
			passTag = true;
		}
	}else{
		alert("【姓名】不能为空!");
		return false;
	}
	
	// 处理“身份证号码”
	var id_card_select = $("#tabInfo .member .id_card").eq(tr_index-1);
	var id_card_val = $(id_card_select).children().eq(0).val();
	
	// 校验“身份证号码”
	var idPatternVerify = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
	if(id_card_val != '' && id_card_val != null && id_card_val != undefined){
		if(!idPatternVerify.test(id_card_val)){
			alert("请输入合法的身份证号码!");
			return false;
		}else{
			passTag = true;
		}
	}else{
		alert("【身份证号码】不能为空!");
		return false;
	}
	
	
	//处理“手机号码”
	var phone_select = $("#tabInfo .member .phone").eq(tr_index-1);
	var phone_val = $(phone_select).children().eq(0).val();
	
	// 校验“手机号码”
	if(phone_val != '' && phone_val != null && phone_val != undefined){
		if(!/(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})/.test(phone_val)){
			alert("请输入合法的电话号码!");
			return false;
		}else{
			passTag = true;
		}
	}else{
		alert("【电话号码】不能为空!");
		return false;
	}
	
	
	// 与户主关系
	var relation_select = $("#tabInfo .member .relation").eq(tr_index-1);
	var relation_val = $(relation_select).children().eq(0).val();
	
	// 是否就业
	var is_work_select = $("#tabInfo .member .is_work").eq(tr_index-1);
	var is_work_val = $(is_work_select).children(".is_work_select").children(":selected").val();
	
	// 就业信息
	var work_info_select = $("#tabInfo .member .work_info").eq(tr_index-1);
	var work_info_val = $(work_info_select).children(".work_info_select").children(":selected").val();
	// 没有就业的时候
	if(is_work_val === '否'){
		work_info_val = '';
	}
	
	// “就业信息”校验
	if(is_work_val === '是'){ // 选择"已经就业"
		if(work_info_val === ''){
			alert("请选择【就业信息】");
			return false;
		}else{
			passTag = true;
		}
	}
	
	//处理户主存在的情况
	if(is_main_val === '是' && checkHuZhu()){ //如果是户主而且户主存在
		alert("户主已经存在!");
		return false;
	}else{
		if(checkIdCard(id_card_val,tr_index)){ // 如果输入的idcard已经存在
			alert("输入的身份证号码已经存在!");
			return false;
		}else{
			passTag = true;
		}
		
	}
	
	if(passTag){
		/* 修改td的内容 */
		$("#tabInfo .member").children(".is_main").eq(tr_index-1).children().eq(0).remove();
		$("#tabInfo .member").children(".is_main").eq(tr_index-1).prepend(is_main_html);
	
		$(name_select).empty(); // 删除旧的
		$(name_select).append(name_val); // 添加到 .name 的 td中
	
		$(id_card_select).empty();
		$(id_card_select).append(id_card_val);
	
		$(phone_select).empty();
		$(phone_select).append(phone_val);
	
		$(relation_select).empty();
		$(relation_select).append(relation_val);
	
		$(is_work_select).empty();
		$(is_work_select).prepend(is_work_val);
	
		$(work_info_select).empty();
		$(work_info_select).prepend(work_info_val);
		return true;
	}
			
}

/** 校验户主是否已经存在 */
function checkHuZhu(){
	var tag = false;
	$(".member .is_main").each(function(index){
		var is_main_val = $(this).children().eq(0).text();
		if(is_main_val === '是'){
			tag = true;
			return;
		}
	});
	return tag;
}

/** 校验身份证号码是否存在 */
function checkIdCard(id_card_val,tr_index){
	var tag = false;
	$(".member .id_card").each(function(index){
		var is_main_val = $(this).text();
		if(is_main_val === id_card_val){
			tag = true;
			return;
		}
	});
	return tag;
}


/** 取消退出编辑状态 */
function cancelEdit(tr_index){
	var oh = oldTrHtml.split(",");
	var tr_obj = $("#tabInfo .member").eq(tr_index); // 得到当前的 tr
	$("#tabInfo .member").children(".is_main").eq(tr_index-1).children().eq(0).remove();//删除旧的
	var is_main_html = "<span>"+oh[0]+"</span>";
	$("#tabInfo .member").children(".is_main").eq(tr_index-1).prepend(is_main_html);
	
	var name_select = $("#tabInfo .member .name").eq(tr_index-1);//得到name的td对象
	var name_val = $(name_select).text(oh[1]); // 得到 name 的值
	
	// 处理“身份证号码”
	var id_card_select = $("#tabInfo .member .id_card").eq(tr_index-1);
	var id_card_val = $(id_card_select).text(oh[2]);
	
	//处理“手机号码”
	var phone_select = $("#tabInfo .member .phone").eq(tr_index-1);
	var phone_val = $(phone_select).text(oh[3]);
	
	// 与户主关系
	var relation_select = $("#tabInfo .member .relation").eq(tr_index-1);
	var relation_val = $(relation_select).text(oh[4]);
	
	// 是否就业
	var is_work_select = $("#tabInfo .member .is_work").eq(tr_index-1);
	var is_work_val = $(is_work_select).text(oh[5]);
	
	// 就业信息
	var work_info_select = $("#tabInfo .member .work_info").eq(tr_index-1);
	var work_info_val = $(work_info_select).text(oh[6]);
	
}

/** 取消保存 */
function cancelOne(obj){
	var obj2 = $(obj).parent().siblings().children(".edit")
	save2edit(obj2);
	cancel2del(obj);
	
	//获得所在tr的索引
	var tr_obj = $(obj).parent().parent();
	var tr_index = tr_obj.index();
	
	//将所有的编辑状态退出并得到所有的值
	cancelEdit(tr_index);
//	exitEdit(tr_index);
	
}

/*根据id删除一行*  */
function del(obj){
	var tag = confirm("确定要删除该条记录吗?");
	if(!tag){
		return;
	}
	var del_id = $(obj).parent().parent().children("td").eq(0).children("[name='ids']").val();
	console.log(del_id);
	var _url = "";
	var _data = {time:new Date(),id:del_id};
	$.ajax({
		type:"post",
		url:_url,
		data:_data,
		dataType:"json",
		success:function(res){
			if(res === true){
				alert("删除成功!");
			}
		},
		error:function(){
			alert("系统异常，刷新后再试!");
		}
	})
	$(obj).parent().parent().remove();
}

</script>



</fieldset>

<fieldset>
<legend><h1>select的赋值</h1></legend>
<select id="sel3">
	<option value="1">是</option><option value="0">否</option>
</select>
<button onclick="setSelVal();">测试</button>
<script>
function setSelVal(){
	$("#sel3").val("否");
}
</script>
</fieldset>

<select id="sel_1">
<option value="">- 请选择 -</option>
<option value="经理">经理</option>
<option value="领导">领导</option>
<option value="秘书">秘书</option>
</select>

<select id="sel_2">
<option value="">- 请选择 -</option>
<option value="大领导">大领导</option>
<option value="中领导">中领导</option>
<option value="小领导">小领导</option>
</select>

<select id="sel_3">
<option value="">- 请选择 -</option>
<option value="张三">张三</option>
<option value="李四">李四</option>
<option value="王五">王五</option>
</select>

<script>
$(function(){
	var sel2Html = $("#sel_2").html();
	var sel3Html = $("#sel_3").html();
	console.log(sel2Html);
	console.log(sel3Html);
	/*$("#sel_1").change(function(){*/
	$("#sel_1").on("change",function(){
		var v = $(this).val();
		alert(v);
		if(v == "领导"){
			// 将 sel2 清空
			$("#sel_2").empty();
			$("#sel_2").append("<option value='大领导' selected='selected'>大领导</option>");
			$("#sel_2").attr("disabled","disabled");
			//清空 sel3 
			$("#sel_2").empty();
			var ops = "<option value='选择1'>选择1</option><option value='选择2'>选择2</option><option value='选择2'>选择3</option>"
			$("#sel_2").append(ops);
		}else{ // 不是领导回复原样
			$("#sel_2").empty();
			$("#sel_2").append(sel2Html);
			$("#sel_3").empty();
			$("#sel_3").append(sel2Html);
		}
	})
})
</script>

<fieldset>
	<legend><h1>动态默认选中 Radio </h1></legend>
	0<input type="radio" name="checkStatus" value="0" id='ck0' /><br />
	1<input type="radio" name="checkStatus" value="1" id='ck1' /><br />
	2<input type="radio" name="checkStatus" value="2"  id='ck2'/><br />
<script type="text/javascript">
	$(document).ready(function(){ 
		$(":radio[name='checkStatus'][value='"+ $.trim(' 1 ') + "']").prop("checked", true);
		  //根据Value值设置Radio为选中状态
	}); 
	

</script>
</script>	
</fieldset>

<fieldset>
	<h1>遍历获得每个table单元格的值</h1>
	<table id="myTB01">
		<tr><td>姓名</td><td>工资</td></tr>
		<tr><td>bart</td><td>16000</td></tr>
		<tr><td>lisa</td><td>18000</td></tr>
		<tr><td>maggie</td><td>19000</td></tr>
	</table>
	<button id="getTBInfo">得到表格中所有的值</button>
	<script>
		document.getElementById("getTBInfo").onclick = function(){
		
		    var tableInfo = "";
		    var tableObj = document.getElementById("myTB01");
		    for (var i = 0; i < tableObj.rows.length; i++) {    //遍历Table的所有Row
		        for (var j = 0; j < tableObj.rows[i].cells.length; j++) {   //遍历Row中的每一列
		            tableInfo += tableObj.rows[i].cells[j].innerText;   //获取Table中单元格的内容
		            tableInfo += "   ";
		        }
		        tableInfo += "\n";
		    }
		    alert(tableInfo);

		}
	</script>
</fieldset>

<fieldset>
	<legend><h1>JS获得html后面拼接的参数</h1></legend>
	<pre>
		function GetQueryString(name)
		{
		     var reg = new RegExp("(^|&amp;)"+ name +"=([^&amp;]*)(&amp;|$)");
		     var r = window.location.search.substr(1).match(reg);
		     if(r!=null)return  unescape(r[2]); return null;
		}
		// 调用方法
		alert(GetQueryString("参数名1"));
		alert(GetQueryString("参数名2"));
		alert(GetQueryString("参数名3"));
	</pre>
	<script>
		
		$(function(){
			alert(GetQueryString("id"))
		})
		function GetQueryString(name)
		{
		     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		     var r = window.location.search.substr(1).match(reg);
		     if(r!=null)return  unescape(r[2]); return null;
		}
		// 调用方法
//		alert(GetQueryString("参数名1"));
//		alert(GetQueryString("参数名2"));
//		alert(GetQueryString("参数名3"));
	</script>
</fieldset>



</body>
</html>
